import React,{useState,useEffect} from 'react'
import {Button, Card, Col, Form, message, Row, Select, Table, Tag} from 'antd';
import style from "./index.module.css"
import { BorderInnerOutlined } from '@ant-design/icons';
// 请求函数引入
import {reqAttrInfoList, reqCategory1List, reqCategory2List, reqCategory3List} from '@api/project/attrApi';
import {
  attrInfoListType,
  attrValueListType,
  category1ListType,
  category2ListType,
  category3ListType,
} from '@api/project/model/attrType';


export default function Attr() {
  const [form] = Form.useForm()
  /*状态管理*/
  //1.定义分类列表
  const [category1List , setCategory1List] = useState<category1ListType>()
  const [category2List , setCategory2List] = useState<category2ListType>()
  const [category3List , setCategory3List] = useState<category3ListType>()
  //2.定义ID
  const [category1Id , setCategory1Id] = useState<number>(0)
  const [category2Id , setCategory2Id] = useState<number>(0)
  const [category3Id , setCategory3Id] = useState<number>(0)
  //3.定义addInfoList
  const [addInfoList , setAddInfoList] = useState<attrInfoListType>([])
  /*请求函数管理*/
  const getCategory1List = async () =>{
    try {
      const re = await reqCategory1List()
      setCategory1List(re)
    }catch (e){
      message.error(e as  any)
    }
  }
  //当一级列表发生变化的时候请求二级列表
  const getCategory2List = async (id : number) =>{
    try {
      const re = await reqCategory2List(id)
      setCategory1Id(id)
      setCategory2Id(0)
      setCategory3Id(0)
      setCategory2List(re)
      form.setFieldsValue({category2List:null,category3List:null})
      setCategory3List([])

    }catch (e){
      message.error(e as any)
    }
  }
  //当二级列表发生变化的时候请求三级列表
  const getCategory3List = async(id : number) => {
    try {
      setCategory2Id(id)
      setCategory3Id(0)
      const re = await reqCategory3List(id)
      setCategory3List(re)
      form.setFieldsValue({category3List:null})
    }catch (e){
      message.error(e as any)
    }
  }
  //属性列表的请求
  const getAttrInfoList = async (id:number) => {
    setCategory3Id(id)
    const re = await reqAttrInfoList({
      category1Id,
      category2Id,
      category3Id:id
    })
    setAddInfoList(re)
  }
  useEffect(()=>{
    getCategory1List()
  },[])

  /*自定义请求管理*/

  /*表格格数据引入*/
  const columns:any = [
    {
      title:'序号',
      dataIndex:'index',
      align:'center' as 'center',
      render(_:any,__:any,index:number){
        return index+1
      },
      width:100
    },
    {
      title:'属性名称',
      dataIndex: 'attrName',
      align:'center' as 'center',
      width:200
    },
    {
      title:'属性值列表',
      dataIndex: 'attrValueList',
      render(attrValueList:attrValueListType) {
        return attrValueList.map(item => {
          return (<Tag color={'purple'} key={item.id}>{item.valueName}</Tag>)
        })
      }
    },
    {
      title:'操作',
      dataIndex: 'id',
      align:'center' as 'center',
      render(id:number) {

      },
      width: 200
    }
  ]
  //核心页面展示
  return (
    <div>
      <Card>
        <div className={style.header}>
          <Form
            form={form}
          >
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item
                  label={'一级分类'}
                  name={'category1List'}
                >
                  <Select
                    style={{width:200,marginLeft:30}}
                    onChange={getCategory2List}
                  >
                    {
                      category1List?.map(item => {
                        return (
                          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                        )
                      })
                    }
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'二级分类'}
                  name={'category2List'}
                >
                  <Select
                    style={{width:200,marginLeft:30}}
                    onChange={getCategory3List}
                  >
                    {
                      category2List?.map(item => {
                        return (
                          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                        )
                      })
                    }
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'三级分类'}
                  name={'category3List'}
                >
                  <Select
                    style={{width:200,marginLeft:30}}
                    onChange={getAttrInfoList}
                  >
                    {
                      category3List?.map(item=>{
                        return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                      })
                    }
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </Card>
      <Card style={{marginTop:20}}>
        <div>
          <Button danger icon={<BorderInnerOutlined />}>添加属性</Button>
        </div>
        <Table
          bordered
          dataSource={addInfoList}
          columns={columns}
          rowKey={'id'}
          pagination={false}
        />
      </Card>
    </div>
  )
}
